<template>
  <div>
    <el-form
      :model="formData"
      :rules="rules"
      ref="formDataRef"
      label-width="80px"
      @submit.prevent
    >
      <el-form-item label="新密码" prop="password">
        <el-input
          type="password"
          clearable
          placeholder="请输入新密码"
          v-model.trim="formData.password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="rePassword">
        <el-input
          type="password"
          clearable
          placeholder="请再次输入新密码"
          v-model.trim="formData.rePassword"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateUserPassword">保存</el-button>
        <el-button type="primary" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { useRouter } from "vue-router";
const router = useRouter();

const formData = ref({});
const formDataRef = ref();

const rules = {
  password: [{ required: true, message: "请输入密码" }],
  rePassword: [{ required: true, message: "请再次输入密码" }],
};

const emit = defineEmits(["editBack"]);
const updateUserPassword = async() => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    const res = await proxy.Api.updateUserPassword(formData.value);
    if (res.code !== 200) {
      proxy.$message.error(res.message);
      return;
    } else {
      proxy.$message.success("修改成功");
      emit("editBack");
    }
  });
};

const cancel = () => {
  emit("editBack");
};
</script>

<style lang="scss" scoped>
.info {
  margin-left: 5px;
  color: #949494;
  font-size: 12px;
}
</style>
